<template>
  <div class="page">
    <!-- <back-btn></back-btn> -->
    <div>
      <!-- <div class="head">
        <div class="tab_bubble">
          <span class="bubble"></span>
          <div class="title">专业列表</div>
        </div>
        <search @search="search"></search>
      </div> -->
      <!-- <div class="tab-bar">
        <tab-bar :tabsData="list" :currentIndex="curIndex" @tabClick="tabSwitch"></tab-bar>
      </div> -->
    </div>
    <div class="content scroll-wrap">
      <screen></screen>
      <!-- <major-list :categoryList="categoryList" :majorData="majorData" :text="text" ref="majorList"></major-list> -->
      <div>
        <ul class="school-items">
          <li class="chance">
            <h6>录取概率</h6>
            <p>难</p>
            <span>30%</span>
          </li>
          <li class="school">
            <img src="" alt="">
            <div class="right">
              <h2 class="">湖南大学</h2>
              <div class="">
                <div class="badge badge-positive">985</div>
              </div>
              <span>湖南 长沙</span>
            </div>
          </li>
          <li class="plan">
            <div class="left">
              <h6>2018</h6>
              <p>招生计划</p>
              <b>56</b>
            </div>
            <div class="right">
              <dl>
                <dt>
                  <div>2017</div>
                  <div>2016</div>
                  <div>2015</div>
                </dt>
                <dd>
                  <div>444</div> <div>666</div> <div>8888888</div>
                </dd>
                <dd>
                  <div>444</div> <div>666</div> <div>888</div>
                </dd>
                <dd>
                  <div>444</div> <div>666</div> <div>888</div>
                </dd>
                <dd>
                  <div>444</div> <div>666</div> <div>888</div>
                </dd>
              </dl>
            </div>
          </li>
          <li class="operation">
            <div class="but active">已添加备选库</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { api } from '@/utils'
import majorList from '~/components/majorList'
export default {
  layout: 'zhiyuan-select',
  data () {
    return {
      list: ['大学优先', '专业优先'],
      curIndex: 0,
      categoryList: [],
      majorData: [],
      text: '正在加载数据...'
    }
  },
  methods: {
    tabSwitch (i) {
      this.curIndex = i
      this.$refs.majorList.currentIndex = 0
      this.getData(this.curIndex)
    },
    getData (params) {
      this.$axios.get(api.zhiyuanQueryMajorByGrade, { params: { gradeId: params } }).then(data => {
        if (data.length > 0) {
          this.majorData = data
          this.categoryList = []
          this.lodash.map(data, (item) => {
            this.categoryList.push({
              id: item.id,
              name: item.name
            })
          })
          this.text = ''
        } else {
          this.majorData = []
          this.categoryList = []
          this.text = '暂无数据'
        }
      })
    },
    search (e) {
      if (e.trim() !== '') {
        this.$store.commit('SET_SEARCH_VAL', e)
        this.$router.push(`search?fromWhere=${1}`)
      }
    }
  },
  components: {
    majorList
  },
  beforeMount () {
    this.getData(this.curIndex)
  }
}
</script>

<style scoped lang="scss">
.flexX,.flexY{
  position:relative;
  display:flex;
}
.flexX{
  width:100%;
  align-items: center;
}
.flexX.t{
  align-items: stretch;
}
.flexY{
  flex-direction: column;
}

.school-items{
  width:100%;
  border-bottom:1px solid $line;
  display:flex;
  justify-content:space-between;
  align-items: center;
  padding:18px;
  padding-right:0px;
  .chance{
    width:90px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items: center;
    h6{
      color:$stable-ad;
      font-weight:normal;
      height:20px; line-height:20px;
    }
    p{
      font-weight:bold;
      color:$table-r;
      font-size:30px;
      height:42px; line-height:42px;
    }
    span{
      color:$table-r;
      font-size:24px;
      height:33px; line-height:33px;
    }
  }
  .school{
    width:450px;
    display:flex;
    img{
      width:90px; height:90px;
    }

  }
  .plan{
    // width:300px;
    display:flex;
    // justify-content: space-between;
    .left{
      display:flex;
      flex-direction: column;
      align-items:center;
      width:140px;
      h6{
        font-size:18px;
        height:25px; line-height:25px;
        color:#69707F;
      }
      p{
        color:$stable-ad;
        height:17px; line-height:17px;
        font-size:12px;
      }
      b{
        height:42px; line-height:42px;
        font-size:30px;
        color:$table-b;
        margin-top:8px;
      }
    }
    .right{
      dl{
        width:100%;
        dt,dd{
          display:flex;
          justify-content:center;
          text-align:center;
          >div{
            flex:1;
            width:60px;
          }
        }
        dt{
          font-size:14px;
          height:24px; line-height:24px;
          color:$stable-ad;
        }
        dd{
          font-size:12px;
          color:#69707F;
          height:20px; line-height:20px;
        }
      }
    }
  }
  .operation{
    padding:0 100px;
    .but{
      width:150px; height:40px; line-height:40px;
      background:$table-b; text-align:center;
      color:$light; font-size:18px;
      &.active{
        border:1px solid $table-b;
        background:transparent;
        color:$table-b;
      }
    }
  }
}

.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  .head {
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /deep/ .search {
      padding: 0;
      margin: 0;
      line-height: 30px;
      text-align: right;
      width: 50%;
      display: flex;
      justify-content: flex-end;
      >div{
        margin: 0;
      }
      input[type="text"] {
        padding-left: 30px;
        width: 90%;
      }
    }
  }
  .content {
    padding: 0;
    // flex: 1;
    // overflow-y: auto;
  }
  /deep/ .tab-bar {
    .tab {
      margin-left: 0;
    }
  }
  /deep/ .major>li>a:hover{
    color: $positive;
  }
}
</style>
